<template>
  <div :class="detailClassName">
    <Back />
    <div class="rotate-btn" @click="changeDirection">xuanzhuan</div>
    <van-swipe
      style="height: 100vh;"
      vertical
      :show-indicators="false"
      :autoplay="'false'"
      lazy-render
      :loop="false"
      @change="onChange"
    >
      <van-swipe-item v-for="item in pageList" :key="item.id">
        <PubVideo
          :ref="getRef"
          class="detail-video"
          :id="item.id"
          :config="item.videoConfig"
        />
        <div class="user-info">
          <CollectionAd :values="item.videoConfig" />
          <UpInfo :values="item.videoConfig" />
          <p class="content">这是视频标题这是视频标题这是题这是视频标题这是视频标题 #标签 #标签标签</p>
          <span>♪ @xxx创作的原声</span>
        </div>
        <UserTendency
          :className="'user-tendency g-m-t-10'"
          :values="item.tendency"
          @success="updateData"
        />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'
import CollectionAd from './components/collection-ad'
import UpInfo from './components/up-info'
import UserTendency from '../components/user-tendency'
import Back from './components/back'

export default {
  name: 'DetailSmallVideo',
  components: {
    PubVideo,
    CollectionAd,
    UpInfo,
    UserTendency,
    Back
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      detailClassName: '',
      videoDetailId: route.query.from || '1',
      pageList: []
    })

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          list: [{
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'http://192.168.24.36:3000/zxcu.m3u8'
          }, {
            poster: '//d302.paixin.com/thumbs/2712843/141887850/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'http://192.168.24.36:3000/zxcu2.m3u8'
          }, {
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'http://192.168.24.36:3000/zxcu3.m3u8'
          }]
        }
      }
    }

    const getPageData = async (query) => {
      const { data } = await getVideoDetail(query)
      if (!data) {
        state.pageList = []
        return
      }
      state.pageList = data.list.map((el, index) => {
        return {
          id: 'video' + index,
          tendency: [{
            isActived: false,
            count: 99
          }, {
            isActived: false,
            count: 99
          }, {
            isActived: false,
            count: 99
          }, {
            isActived: false,
            count: 99
          }],
          videoConfig: {
            autoplay: !index,
            controls: false,
            rightBar: false,
            video: el.link,
            poster: el.poster
          }
        }
      })
    }
    getPageData({
      id: state.videoDetailId
    })

    let itemRefs = []
    const getRef = el => {
      if (el) {
        itemRefs.push(el)
        const res = new Map()
        itemRefs = itemRefs.filter(el => !res.has(el.id) && res.set(el.id, 1))
      }
    }

    let currentIndex = 0
    const onChange = index => {
      itemRefs[currentIndex].ckplayer?.pause()
      itemRefs[index].ckplayer?.play()
      currentIndex = index
    }

    const updateData = val => {
      switch (val.name) {
        case 'follow':
          Toast('xiexie关注')
          break
        case 'like':
          state.pageList[currentIndex].tendency[val.index].isActived = !state.pageList[currentIndex].tendency[val.index].isActived
          Toast('赞赞赞赞赞赞')
          break
        case 'star':
          state.pageList[currentIndex].tendency[val.index].isActived = !state.pageList[currentIndex].tendency[val.index].isActived
          Toast('收藏')
          break
        case 'chat':
          Toast('留言')
          break
        case 'share':
          Toast('分享')
          break
      }
    }

    const changeDirection = () => {
      state.detailClassName = state.detailClassName ? '' : 'detail-rotate'
    }

    return {
      ...toRefs(state),
      getRef,
      onChange,
      updateData,
      changeDirection
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-video {
  width: 100%;
  height: 100vh;
}
.rotate-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  z-index: 261;
  background: red;
}
.detail-rotate {
  transform: rotate(90deg);
}
.user-info {
  position: absolute;
  left: 16px;
  bottom: 70px;
  color: #fff;
  z-index: 1;
  background: gray;
  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .content {
    max-width: 60%;
  }
}
.user-tendency {
  position: absolute;
  right: 10px;
  bottom: 70px;
  color: #fff;
  z-index: 261;
}
</style>